<template>
  <div class="q-pa-md">
    <t-carousel
      v-model="slide"
      transition-prev="scale"
      transition-next="scale"
      swipeable
      animated
      control-color="white"
      navigation
      padding
      arrows
      height="300px"
      class="bg-primary text-white shadow-1 rounded-borders"
    >
      <template v-slot:navigation-icon="{ active, btnProps, onClick }">
        <t-btn
          v-if="active"
          size="lg"
          icon="home"
          color="yellow"
          flat
          round
          dense
          @click="onClick"
        />
        <t-btn
          v-else
          size="sm"
          :icon="btnProps.icon"
          color="white"
          flat
          round
          dense
          @click="onClick"
        />
      </template>

      <t-carousel-slide name="style" class="column no-wrap flex-center">
        <t-icon name="style" size="56px" />
        <div class="q-mt-md text-center">
          {{ lorem }}
        </div>
      </t-carousel-slide>
      <t-carousel-slide name="tv" class="column no-wrap flex-center">
        <t-icon name="live_tv" size="56px" />
        <div class="q-mt-md text-center">
          {{ lorem }}
        </div>
      </t-carousel-slide>
      <t-carousel-slide name="layers" class="column no-wrap flex-center">
        <t-icon name="layers" size="56px" />
        <div class="q-mt-md text-center">
          {{ lorem }}
        </div>
      </t-carousel-slide>
      <t-carousel-slide name="map" class="column no-wrap flex-center">
        <t-icon name="terrain" size="56px" />
        <div class="q-mt-md text-center">
          {{ lorem }}
        </div>
      </t-carousel-slide>
    </t-carousel>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        slide: ref('style'),
        lorem:
          'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo.',
      };
    },
  };
</script>
